Line Charts
To display a line chart, use the Chart control and add a LineSeries to the chart. The LineSeries must specify an ItemsSource, which is a collection containing the data to be displayed, and will normally specify a XBinding and a YBinding, which are data bindings specifying how the points along the line are determined from the data.<ms:Chart Title="Sales" Width="600" Height="400"> <ms:LineSeries ItemsSource="{Binding}" XBinding="{Binding Quarter}" YBinding="{Binding Amount}" /> </ms:Chart>
To change the color of the line, use the SeriesBrush property:
<ms:LineSeries SeriesBrush="Red" />
To show a dashed line, use the DashArray property. The XAML syntax for DashArray is the same as for Shape.StrokeDashArray—see the Silverlight SDK documentation for details.
<ms:LineSeries DashArray="2 1" />
To make broader changes to the appearance of the line, use the LineStyle property. The target type for the LineStyle should be Path.
<ms:LineSeries> <ms:LineSeries.LineStyle> <Style TargetType="Path"> <Setter Property="StrokeThickness" Value="4" /> <Setter Property="Stroke" Value="Red" /> <Setter Property="StrokeDashArray" Value="2 1" /> </Style> </ms:LineSeries.LineStyle> </ms:LineSeries>
You can optionally show a symbol at each point on the line by setting the SymbolStyle property. The target type of the SymbolStyle should be ChartSymbol, and to change the shape of the point you must set the control Template.
<ms:LineSeries> <ms:LineSeries.SymbolStyle> <Style TargetType="ms:ChartSymbol"> <Setter Property="Width" Value="8" /> <Setter Property="Height" Value="8" /> <Setter Property="Margin" Value="-4,-4,4,4" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ms:ChartSymbol"> <Rectangle Stroke="Red" StrokeThickness="1" Fill="Pink" /> </ControlTemplate> </Setter.Value> </Setter> </Style> </ms:LineSeries.SymbolStyle> </ms:LineSeries>
Area Charts
To display an area chart, add a AreaSeries to a Chart control.
Area series have the same options as line series and are drawn in the same way, except that the area between the line and the X axis is filled with the SeriesBrush. To make multiple overlapping area series visible, the fill is made slightly transparent. To make the fill opaque, or to otherwise customise the appearance of the filled area, use the AreaStyle property. The target type for the AreaStyle should be Path.
<ms:AreaSeries ItemsSource="{Binding}" XBinding="{Binding Quarter}" YBinding="{Binding Amount}" > <ms:AreaSeries.AreaStyle> <Style TargetType="Path"> <Setter Property="Fill"> <Setter.Value> <RadialGradientBrush SpreadMethod="Repeat"> <GradientStop Offset="0" Color="Blue" /> <GradientStop Offset="0.2" Color="Purple" /> <GradientStop Offset="0.4" Color="Red" /> <GradientStop Offset="0.6" Color="Yellow" /> <GradientStop Offset="0.8" Color="Lime" /> <GradientStop Offset="1" Color="Blue" /> </RadialGradientBrush> </Setter.Value> </Setter> </Style> </ms:AreaSeries.AreaStyle> </ms:AreaSeries>